<template>
  <div class="distribution">
    <img class="addTeam" src="../assets/按钮.png" alt="" />

    <!-- 销售数据 -->
    <div class="sale">
      <!-- <div class="sale-title">
        <div class="sale-title-l">
          <img src="../assets/数据.png" alt="" />
          <h3>销售数据</h3>
        </div>
        <div class="sale-t">
          <span>{{ currentTime }}更新</span>
          <img src="../assets/更新.png" alt="" />
        </div>
      </div> -->

      <div class="sale-data">
        <div class="sale-data-all">
          <div class="sale-data-item">
            <p>{{ saleData.personnel }}</p>
            <p>分销人员</p>
          </div>
          <div class="sale-data-item">
            <p>{{ saleData.allOrder }}</p>
            <p>总销售订单数</p>
          </div>
          <div class="sale-data-item">
            <p>{{ saleData.saleAllMoney }}</p>
            <p>销售总金额(元)</p>
          </div>
        </div>
        <div class="sale-data-today">
          <div class="sale-data-item">
            <p>{{ saleData.allProfit }}</p>
            <p>总收益(元)</p>
          </div>
          <div class="sale-data-item">
            <p>{{ saleData.todaySaleOrder }}</p>
            <p>今日销售订单数</p>
          </div>
          <div class="sale-data-item">
            <p>{{ saleData.todaySaleMoney }}</p>
            <p>今日销售金额(元)</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 销售列表 -->
    <ul class="saleList">
      <li v-for="v in saleList" :key="v.name">
        <div class="list-left">
          <img :src="v.img" alt="" />
          <div class="name">
            <p>{{ v.name }}</p>
            <span>{{ v.time }}</span>
          </div>
        </div>
        <div class="list-right">
          <span>销售金额: {{ v.money }}</span>
          <img src="../assets/右箭头.png" alt="" />
        </div>
      </li>
    </ul>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "../components/tabbar.vue";

export default {
  name: "distribution", // 分销
  components: {
    Tabbar,
  },
  data() {
    return {
      saleData: {
        // 销售数据
        personnel: "18", // 分销人员
        allOrder: "588", // 总订单
        saleAllMoney: "18990.0", // 销售总金额
        allProfit: "11990.0", // 总收益
        todaySaleOrder: "68", // 今日销售订单
        todaySaleMoney: "1590.0", // 今日销售金额
      },
      saleList: [
        {
          img: require("../assets/头像.png"),
          name: "张三三",
          time: "2022-07-25 14:00",
          money: "5888.0",
        },
        {
          img: require("../assets/头像.png"),
          name: "里斯",
          time: "2022-07-25 14:00",
          money: "5888.0",
        },
        {
          img: require("../assets/头像.png"),
          name: "王伟",
          time: "2022-07-25 14:00",
          money: "5888.0",
        },
        {
          img: require("../assets/头像.png"),
          name: "维新心",
          time: "2022-07-25 14:00",
          money: "5888.0",
        },
        {
          img: require("../assets/头像.png"),
          name: "晓霞",
          time: "2022-07-25 14:00",
          money: "5888.0",
        },
        {
          img: require("../assets/头像.png"),
          name: "李思思",
          time: "2022-07-25 14:00",
          money: "5888.0",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.distribution {
  padding: 28px 34px;
  padding-bottom: 100px;
  background-color: #f5f5f5;
  min-height: 100vh;
  .addTeam {
    width: 680px;
    height: 96px;
  }

  .sale {
    width: 680px;
    // height: 362px;
    background-color: #fff;
    margin: 16px auto 36px;
    // padding-top: 15px;
    padding: 42px 32px;

    .sale-title {
      padding: 0 16px;
      margin-bottom: 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .sale-title-l {
        display: flex;
        align-items: center;

        img {
          width: 24px;
          height: 22px;
          margin-right: 10px;
        }

        h3 {
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #1e1e1e;
        }
      }

      .sale-t {
        color: #a0a0a0;
        display: flex;
        align-items: center;

        img {
          width: 22px;
          height: 22px;
          margin-left: 12px;
        }
      }
    }

    .sale-data {
      padding: 0 28px;

      .sale-data-all {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        margin-bottom: 64px;
      }

      .sale-data-today {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
      }

      .sale-data-item {
        p:first-child {
          font-size: 34px;
          font-weight: bold;
          color: #101010;
        }

        p:last-child {
          font-size: 24px;

          color: #909090;
        }
      }
    }
  }

  .saleList {
    // padding: 0 36px;
    margin-top: 30px;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // height: 90px;
      padding: 38px 0 26px;
      border-bottom: 1px solid #d0d0d0;
      .list-left {
        display: flex;
        img {
          width: 64px;
          height: 64px;
          margin-right: 34px;
        }
        .name {
          p {
            font-weight: 500;
            margin-bottom: 3px;
            font-size: 28px;
          }
          span {
            font-size: 24px;
            color: #909090;
          }
        }
      }
      .list-right {
        img {
          width: 24px;
          height: 20px;
          margin-left: 16px;
        }
      }
    }
  }
}
</style>